<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sitio de Taxis</title>
<meta name="congreso" content="" />
<meta name="ingenieria" content="" />
<link href="<s:url value='/css/style.css'/>" rel="stylesheet" type="text/css" media="screen" />
<sx:head extraLocales="es-mx"/>

   <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAHzkGMYAxezCdxFC7aouLTxTwM0brOpm-All5BF6PoaKBxRWWERQqtWArDxJd0K6DAJX5P4njCZDm3g&sensor=false" type="text/javascript"></script>
   
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
    	   
    	  var map = new GMap2(document.getElementById("map_canvas"));
    	  var geocoder = new GClientGeocoder();
		  geocoder.setBaseCountryCode('mx');
		  var baseIcon = new GIcon(G_DEFAULT_ICON);
		  map.setCenter(new GLatLng(19.497778,-99.126944),10);
		  var bounds = new GLatLngBounds();
		  
    	  function showAddress(addressA, addressB) {
    	    geocoder.getLatLng(
    	      addressA,
    	      function(point) {
    	        if (!point) {
    	          alert(addressA + " not found");
    	        } else {
        	        
    	          var letteredIcon = new GIcon(baseIcon);
    	          letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
    	          markerOptions = { icon:letteredIcon };
    	          var marker = new GMarker(point, markerOptions);
    	          map.addOverlay(marker);    
    	          bounds.extend(point);  
    	          GEvent.addListener(marker, "click", function() {
    	        	    var myHtml = addressA;
    	        	    map.openInfoWindowHtml(point, myHtml);
    	        	  }); 
    	        }
    	      }
    	    );
    	    geocoder.getLatLng(
   	    	      addressB,
   	    	      function(point) {
   	    	        if (!point) {
   	    	          alert(addressB + " not found");
   	    	        } else {
       	    	        
   	    	        	var letteredIcon = new GIcon(baseIcon);
   	      	          letteredIcon.image = "http://www.google.com/mapfiles/markerB.png";
   	      	          markerOptions = { icon:letteredIcon };
   	      	          var marker = new GMarker(point, markerOptions);
   	    	          map.addOverlay(marker);
   	    	      		bounds.extend(point);
   	    	          GEvent.addListener(marker, "click", function() {
   	    	        	    var myHtml = addressB;
   	    	        	    map.openInfoWindowHtml(point, myHtml);
   	    	        	  });
   	    	       	
   	    	        }
   	    	      }
   	    	    );
    	  	}

    	  
    	  showAddress('<s:property value="peticion.partida" />', '<s:property value="peticion.destino" />');
    	  
    	  var mapControl = new GMapTypeControl();
    	  map.addControl(mapControl);
    	  map.addControl(new GSmallMapControl());
      }
    }
    </script>

</head>
<body onload="initialize()" onunload="GUnload()"	>
<div id="wrapper">
	<div id="header">
		<div id="menu">
			<ul>
				<li><s:a href="index">Inicio</s:a></li>
				<li><s:a href="quienesSomos.action">&iquest;Qui&eacute;nes somos?</s:a></li>
				<li><s:a href="tarifas.action">Tarifas</s:a></li>
				<li><s:a href="servicios.action">Servicios</s:a></li>
				<s:if test ="#session.usuario==null">
				<li><s:a href="usuarioForm.action">Reg&iacute;strate</s:a></li>
				</s:if>
				<s:else>
				<li><s:a href="peticionForm.action">Reservar</s:a></li>
				<li><s:a href="logout.action">Logout</s:a></li>
				</s:else>
			</ul>
		</div>
	</div>
<hr />
  
 <div id="page" align="center">
  <div id="content"> <div class="post">
   <h2 class="title"> Informaci&oacute;n de tu reservaci&oacute;n </h2>
   	
   <div class="entry"> Los datos de tu reservaci&oacute;n <br />
   <table border ="1" class="<s:if test="#status.even">even</s:if><s:else>odd</s:else>">
   <tr>
   		<td>Lugar de partida:(A)</td> <td><s:property value="peticion.partida"/></td>
   </tr>
   <tr>
   		<td>Lugar de destino:(B) </td> <td><s:property value="peticion.destino"/> </td>
   </tr>
   <tr>
   		<td class="nowrap">Fecha: </td> <td><s:property value="peticion.fecha"/></td>
   </tr>

   </table>
   
   Mapa de la ubicacion <br />
   <div id="map_canvas" style="width: 500px; height: 300px"></div>

    
    
   <s:url action="peticionListUsuario.action" id="listaPeticiones">
		<s:param name="usuario" value="#session.usuario.idUsuario"/>
	</s:url>
	<s:a href="%{listaPeticiones}">Ver reservaciones</s:a> <br />
   	<s:a href="index">Regresa a la p&aacute;gina principal.</s:a> </div> </div> </div>
   	<div id="sidebar">
		<ul>
			<li>
				<h2>Reservaciones</h2>
				<ul><s:a href="peticionForm.action">Hacer reservaci&oacute;n</s:a></ul>
				<s:url action="peticionListUsuario.action" id="listaPeticiones">
							<s:param name="usuario" value="#session.usuario.idUsuario"/>
				</s:url>
					<ul><s:a href="%{listaPeticiones}">Ver reservaciones</s:a></ul>
			</li>
		</ul>
	</div>
   	  <s:include value="pageBottom.jsp" /> 